<template>
	<el-container direction="vertical">
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="curComponent">
				<el-tab-pane
					v-for="item in tagList"
					:key="item.component"
					:label="item.label"
					:name="item.component"
				></el-tab-pane>
			</el-tabs>
		</el-header>
		<keep-alive :max="10">
			<component
        :is="curComponent" 
        v-bind="curTag.props ?? {}"
        v-on="curTag.on ?? {}"
      />
		</keep-alive>
	</el-container>
</template>

<script>
import { ref, computed } from "vue";
import info from "./components/info/index.vue";
import signUp from "./components/signUp/index.vue";
import learningRecord from "./components/learningRecord/index.vue";
import operationRecord from "./components/operationRecord/index.vue";
import graduation from "./components/graduation/index.vue";
import graduationApplication from "./components/graduation-application/index.vue";
import transactionRecord from "./components/transactionRecord/index.vue";
import classManagement from "./components/classManagement/index.vue";
import courseTable from "./components/courseTable/index.vue";
import Attendance from "./components/Attendance/index.vue";

export default {
	name: "detail",
	components: {
		info,
		// signUp,
		learningRecord,
		operationRecord,
    graduation,
    graduationApplication,
		transactionRecord,
		classManagement,
		courseTable,
		Attendance
	},
  setup() {
		const tagList = [
			// {
			// 	label: "个人信息",
			// 	component: "info",
			// },
			// {
			// 	label: "报读明细",
			// 	component: "signUp",
			// },
			{
				label: "交易记录",
				component: "transactionRecord",
			},
			{
				label: "班级管理",
				component: "classManagement",
			},
			// {
			// 	label: "排课表",
			// 	component: "courseTable",
			// },
			{
				label: "考勤表",
				component: "Attendance",
			},
			{
				label: "学习记录",
				component: "learningRecord",
			},
			{
				label: "毕业管理",
        component: "graduation",
        on: {
          toGraduationDetail(studentId) {
            tagList[8].props.studentId = studentId || '3434';
            curComponent.value = 'graduationApplication'
          }
        },
			},
			// {
			// 	label: "毕业申请详情",
      //   component: "graduationApplication",
      //   props: { studentId: '' },
			// },
			{
				label: "操作记录",
				component: "operationRecord",
			},
    ];

		// const curComponent = ref("info");
		const curComponent = ref("transactionRecord");
    const curTag = computed(() => {
      return tagList.find(item => item.component === curComponent.value)
    })
		return {
			tagList,
      curComponent,
      curTag
		};
	},
};
</script>

<style></style>
